<template>
  <div class="home">
    <h1>欢迎使用校园智能助手系统</h1>
    <div class="features">
      <div class="feature-card" v-for="feature in filteredFeatures" :key="feature.title">
        <h3>{{ feature.title }}</h3>
        <p>{{ feature.description }}</p>
        <router-link :to="feature.link" class="btn">前往</router-link>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data() {
    return {
      userRole: 'student', // 默认为学生
      allFeatures: [
        {
          title: '课程学习',
          description: '查询课程信息、成绩和提交作业',
          link: '/courses',
          roles: ['student', 'teacher', 'principal']
        },
        {
          title: 'AI智能问答',
          description: '向AI助手提问校园相关问题',
          link: '/ai/chat',
          roles: ['student', 'teacher', 'principal']
        },
        {
          title: '校园卡服务',
          description: '查询余额和消费记录',
          link: '/campus-card',
          roles: ['student', 'teacher', 'principal']
        },
        {
          title: '宿舍报修',
          description: '提交和跟踪报修申请',
          link: '/dorm-repair',
          roles: ['student', 'teacher', 'principal']
        },
        {
          title: '请假申请',
          description: '提交和管理请假申请',
          link: '/leave-apply',
          roles: ['student']
        },
        {
          title: '请假审批',
          description: '审批学生请假申请',
          link: '/leave-apply',
          roles: ['teacher']
        },
        {
          title: '教师请假审批',
          description: '审批教师请假申请',
          link: '/leave-apply',
          roles: ['principal']
        },
        {
          title: '图书馆服务',
          description: '查询和借阅图书',
          link: '/library',
          roles: ['student', 'teacher', 'principal']
        },
        {
          title: '校园通知',
          description: '查看最新校园通知',
          link: '/notices',
          roles: ['student', 'teacher', 'principal']
        },
        {
          title: '奖学金申报',
          description: '查看和申请奖学金',
          link: '/scholarship',
          roles: ['student']
        },
        {
          title: '奖学金审批',
          description: '审核学生奖学金申请',
          link: '/scholarship',
          roles: ['teacher']
        },
        {
          title: '奖学金终审',
          description: '终审奖学金申请',
          link: '/scholarship',
          roles: ['principal']
        },
        {
          title: '食堂服务',
          description: '查看食堂和菜品信息',
          link: '/canteen',
          roles: ['student', 'teacher', 'principal']
        },
        {
          title: '校园活动',
          description: '查看和报名校园活动',
          link: '/activities',
          roles: ['student', 'teacher', 'principal']
        }
      ]
    }
  },
  computed: {
    filteredFeatures() {
      // 根据用户角色过滤功能
      const userStr = localStorage.getItem('user')
      if (userStr) {
        try {
          const user = JSON.parse(userStr)
          this.userRole = user.role
        } catch (e) {
          console.error('解析用户信息失败:', e)
        }
      }
      
      return this.allFeatures.filter(feature => 
        feature.roles.includes(this.userRole)
      )
    }
  }
}
</script>

<style scoped>
.home {
  text-align: center;
}

.features {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.feature-card {
  background: white;
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.feature-card h3 {
  color: #2c3e50;
  margin-bottom: 0.5rem;
}

.btn {
  display: inline-block;
  background-color: #3498db;
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  text-decoration: none;
  margin-top: 1rem;
}

.btn:hover {
  background-color: #2980b9;
}
</style>